<template>
  <a-modal
    title="全局变量替换"
    :visible="visible"
    :confirm-loading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-item label="原变量值" v-bind="validateInfos.oldVariable">
        <a-input v-model:value="modelRef.oldVariable" />
      </a-form-item>
      <a-form-item label="新变量值" v-bind="validateInfos.newVariable">
        <a-input v-model:value="modelRef.newVariable" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts">
import { defineComponent, reactive, toRaw, ref } from "vue";
import { Form } from "ant-design-vue";

const useForm = Form.useForm;
export default defineComponent({
  props: {
    visible: {
      type: Boolean,
      require: true,
      default: false
    }
  },
  setup(props: any, cxt: any) {
    const confirmLoading = ref<boolean>(false);
    const modelRef = reactive({
      oldVariable: "",
      newVariable: ""
    });
    const { resetFields, validate, validateInfos } = useForm(
      modelRef,
      reactive({
        oldVariable: [
          {
            required: true,
            message: "请输入原变量值"
          }
        ],
        newVariable: [
          {
            required: true,
            message: "请输入新变量值"
          }
        ]
      })
    );

    const handleOk = () => {
      validate()
        .then((res) => {
          console.log(res, toRaw(modelRef));
        })
        .catch((err) => {
          console.log("error", err);
        });
    };
    const handleCancel = () => {
      resetFields();
      cxt.emit("cancelFn");
    };
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      validateInfos,
      modelRef,
      confirmLoading,
      handleOk,
      handleCancel
    };
  }
});
</script>
<style lang="less" scoped></style>
